<template>
  <div>
    <NavBar />
    <PostList :posts="posts" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axiosInstance from '../plugins/axios' // 导入 axios 实例
import NavBar from '../components/NavBar.vue'
import PostList from '../components/PostList.vue'

const route = useRoute()

const posts = ref([])

// 更新 fetchCategoryPosts 函数以发送请求到后端
const fetchCategoryPosts = async (categoryId: string) => {
  try {
    const response = await axiosInstance.get('/posts/filter', {
      params: { categoryId }
    })
    console.log('categoryId: ' + categoryId)
    posts.value = response.data // 将响应数据赋值给 posts
  } catch (error) {
    console.error('Error fetching category posts:', error)
  }
}

onMounted(() => {
  const { categoryId } = route.params
  if (categoryId) {
    fetchCategoryPosts(categoryId as string)
  }
})
</script>